// 将用户输入添加至待办项

// 可以对todolist进行分类，用户勾选即将待办项分入已完成组

// todolist的每一项可删除和编辑

// 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存

// 可以清楚域名下本地缓存，并清空所有todolist项

// 例子
// const arr = [{
//     label: '开始您的ToDoList之旅！',
//     done: false
// }]
// saveData(arr)


let ol = document.getElementsByTagName('ol')[0]
let ul = document.getElementsByTagName('ul')[0]

load()


// 获取 input 输入的值
let iptDom = document.getElementById('ipt')

// ---获取提交按钮的dom节点
const submitBtn = document.getElementById('btn')
// 点击获取input 输入的值
submitBtn.addEventListener('click', () => {
    let todoObj = {
        label: iptDom.value,
        done: false
    }
    let local = getData()
    local.push(todoObj)
    saveData(local)
    load()
    iptDom.value = ''
})

// 删除
ol.addEventListener('click', (e) => {
    delData(e)
})

ul.addEventListener('click', (e) => {
    delData(e)
})


// 渲染加载数据
function load() {
    const local = getData()
    let ol = document.getElementsByTagName('ol')[0]
    let ul = document.getElementsByTagName('ul')[0]
    let lio = ol.querySelectorAll('li')
    let liu = ul.querySelectorAll('li')
    let todoTotal = 0
    let doneTotal = 0
    if (!(lio.length === 0 && liu.length === 0)) {
        lio.forEach(item => {
            ol.removeChild(item)
        })
        liu.forEach(item => {
            ul.removeChild(item)
        })
    }
    local.forEach((ele, index) => {
        let newLi = document.createElement('li')
        newLi.innerHTML = ele.label
        newLi.className = ele.done ? 'uli' : 'oli'

        let ipt = document.createElement('input')
        ipt.type = 'checkbox'
        ipt.id = index
        ipt.className = 'ipt'
        ipt.checked = ele.done ? true : false
        newLi.insertAdjacentElement('afterbegin', ipt)

        let span = document.createElement('span')
        span.className = 'del'
        span.id = index
        span.innerHTML = 'x'
        newLi.appendChild(span)

        ele.done ? ul.insertAdjacentElement('afterbegin', newLi) : ol.insertAdjacentElement('afterbegin', newLi)
        ele.done ? doneTotal++ : todoTotal++
    })
    let todoNum = document.getElementById('todoNum')
    todoNum.innerHTML = todoTotal
    let doneNum = document.getElementById('doneNum')
    doneNum.innerHTML = doneTotal
}



// 保存本地存储数据
function saveData(data) {
    // 转换为json字符串存储在本地
    localStorage.setItem('myToDoList', JSON.stringify(data))
}

// 读取本地数据
function getData() {
    const localData = localStorage.getItem('myToDoList')
    if (localData) {
        return JSON.parse(localData)
    } else {
        return []
    }
}

// 删除数据
function delData(e) {
    if(e.target && e.target.nodeName.toUpperCase() =="SPAN"){
        alert('确认删除此数据！' + '\n'+'(删除后将无法恢复)')
        // 先获取本地存储
        let data = getData()
        // 修改本地数据
        let index = e.target.id
        data.splice(index,1)
        // 保存到本地存储
        saveData(data)
        // 重新渲染页面
        load()
    }
}

// 正在进行与已完成操作--更新数据
function upDate(e) {
    if(e.target && e.target.nodeName.toUpperCase() =="INPUT") {
        // 先获取本地数据
        let data = getData()
        // 修改本地数据
        let index = Number(e.target.id)
        data[index].done = e.target.checked
        // 存储本地数据
        saveData(data)
        // 重新渲染数据
        load()
    }
}

// 正在进行与已完成操作
ol.addEventListener('click', (e) => {
    upDate(e)
})

ul.addEventListener('click', (e) => {
    upDate(e)
})
